function $(selector) {
  return document.querySelector(selector);
}
function $$(selector) {
  return document.querySelectorAll(selector);
}
/*
container:为那个区域设置轮播
duration：多长时间轮播一次，0表示不自动轮播
callback：轮播结束后的回调函数,
*/
function createSlider(container,duration,callback) {
  //找到container下的第一个子元素，设置其的margin-left就可以实现轮播
  let firstItem = container.querySelector('.item');
  //获取容器的宽度
  let cw = container.clientWidth;
  //获取子元素的数量
  let count = container.children.length;
  //让轮播的时候有动画，而不是一下就过去的
  firstItem.style.transition = '1s';
  //定义定时器
  let timer = null;
  //记录当前的索引
  let currentIndex = 0;
  //切换到指定的子项
  function switchTo(index) {
    if (index < 0) { index = 0; }
    if(index > count-1) { index = count - 1; }
    currentIndex = index;
    firstItem.style.marginLeft = -index * cw + 'px';
    //触发回调函数
    callback && callback(index);
  }
  //实现自动切换
  function autoPlay() {
    if (timer || duration === 0) {
      return;
    }
    timer = setInterval(() => {
      switchTo((currentIndex+1)%count)
    }, duration);
  }
  autoPlay();
  //停止自动切换
  function stopAutoPlay() {
    clearInterval(timer);
    timer = null;
  }
  //手指滑动切换
  container.ontouchstart = function (e) {
    //手指移上去的时候需要停止自动切换
    stopAutoPlay();
    //不需要过渡效果
    firstItem.style.transition = 'none';
    let x = e.touches[0].clientX;
    // 获取第一个元素的marginleft值，以便于让其与手指移动的距离相等
    let ml = parseFloat(firstItem.style.marginLeft) || 0;
    //当手指在上面移动的时候
    container.ontouchmove = function(e) {
      //最大和最小可以滑动的距离
      let minMl = -(count - 1) * cw;
      //获取移动的距离
      let disX = e.touches[0].clientX - x;
      //得到新的距离
      let newMl = ml + disX;
      if(newMl < minMl) {
        newMl = minMl;
      }
      if (newMl > 0) {
        newMl = 0;
      }
      //去掉浏览器的默认行为
      e.preventDefault();
      //设置firstItem的marginleft值
      firstItem.style.marginLeft = newMl + 'px';
    }
    //手指放开的时候 -> 1.如果是向左滑动，松开手指的时候应该取整，反正也一样 2. 开启自动切换
    container.ontouchend = function(e) {
      //手指在横轴上移动了多远
      var disX = e.changedTouches[0].clientX - x; 
      //将过渡动画设置回去
      firstItem.style.transition = '1s';
      if (disX < -30) {
        switchTo(currentIndex + 1);
      }
      if(disX > 30){
        switchTo(currentIndex - 1);
      }
      //开启自动切换
      autoPlay();
    }
  }
  return switchTo;
}